<!-- 
  组件中如何获取仓库的 state 使用

      1. 直接使用 this.$store.state.xxx

      2. computed 计算属性

      3. mapState 辅助函数，直接将 store 的 state 数据映射到组件的 computed 上。
          1. 数组写法
          2. 对象写法
        
 -->

<script>
import Hello from "./components/Hello.vue";
import { mapState } from "vuex";

export default {
  components: {
    Hello,
  },

  data() {
    return {
      localCount: 100,
    };
  },

  /**
   * computed: mapState()   这种写法会导致组件没法编写其他的计算属性
   *
   * 推荐如下 ...
   */
  computed: {
    ...mapState(["msg", "count"]),

    localCountPlus() {
      return this.localCount + 1;
    },
  },

  /**
   * mapState数组写法，数组中每一个项目就是仓库中的state数据的名字
   */
  // computed: mapState(["msg", "count"]),

  /**
   * mapState对象写法
   *    key   - 组件的计算属性名字
   *    value - 好几种
   */
  // computed: mapState({
  //   // 箭头函数写法：
  //   //    函数会接受一个 state
  //   count: (state) => state.count,

  //   // 字符串写法：this.msg => this.$store.state.msg
  //   myMsg: "msg",

  //   // 为了能够使用 `this` 获取局部状态，必须使用常规函数
  //   countPlus(state) {
  //     return state.count + this.localCount;
  //   },
  // }),

  created() {
    console.log(this.$store);
  },
};
</script>

<template>
  <div>
    <h1>Vuex基础</h1>
    <button>{{ msg }}</button>
    <button>{{ count }}</button>

    <hr />

    <Hello />
  </div>
</template>
